<template>
    <div class="chart-container">
        <div class="chart-wrapper">
            <canvas id="priceChart"></canvas>
        </div>
        <div class="info-wrapper">
            <div class="ratio">
                <span class="ratio-value">{{ ratio }}</span> RousePro
                <span class="colon"> : </span>
                <span class="ratio-value">1</span> WuDao
            </div>
            <div class="line"></div>
            <div class="price">
                <span class="price-value">{{ price }}</span> <span class="price-text">价格</span>(WuDao)
            </div>
        </div>
    </div>
</template>

<script>
import { Chart, registerables } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(...registerables, annotationPlugin);

export default {
    name: 'PriceChart',
    data() {
        return {
            ratio: 3.5,
            price: 3436.67,
        };
    },
    mounted() {
        this.renderChart();
    },
    methods: {
        renderChart() {
            const ctx = document.getElementById('priceChart').getContext('2d');
            const gradient = ctx.createLinearGradient(0, 0, 0, 130); // 调整渐变的高度
            gradient.addColorStop(0, 'rgba(255, 123, 0, 0.4)');
            gradient.addColorStop(1, 'rgba(255, 123, 0, 0.01)');

            const data = [1, 3, 3.2, 4, 3.1, 2.5, 3.1, 5, 3.5, 3.8, 2.1, 1.5, 2.6, 2.9, 4];
            const maxValue = Math.max(...data);
            const minValue = Math.min(...data);

            const pointStyles = data.map((value, index) => {
                // 双数峰点显示圆圈，单数峰点不显示圆圈
                return (index + 1) % 2 === 0 ? 'circle' : null;
            });
            const pointRadii = data.map((value, index) => {
                // 双数峰点的圆圈半径为2，单数峰点的圆圈半径为0
                return (index + 1) % 2 === 0 ? 2 : 0;
            });

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
                    datasets: [
                        {
                            label: 'Price Trend',
                            data: data,
                            borderColor: '#FB8417',
                            borderWidth: 2,
                            backgroundColor: gradient,
                            fill: true,
                            tension: 0.4,
                            pointStyle: pointStyles, // 设置点的样式
                            pointRadius: pointRadii, // 设置点的半径
                            pointBackgroundColor: 'white', // 设置点的颜色为白色
                            pointBorderColor: 'white', // 设置点的边框颜色
                            pointBorderWidth: 1, // 边框宽度
                        },
                    ],
                },
                options: {
                    scales: {
                        y: {
                            min: minValue - 1,  // 设置 y 轴的最小值
                            max: maxValue + 1,  // 设置 y 轴的最大值
                            grid: {
                                // color: 'rgba(255, 255, 255, 0.2)',
                                display: false, // 不显示x轴刻度
                            },
                            ticks: {
                                display: false, // 不显示y轴刻度
                            },
                        },
                        x: {
                            display: false,
                        },
                    },
                    plugins: {
                        legend: {
                            display: false,
                        },
                    },
                    responsive: true,
                    maintainAspectRatio: false,
                },
            });
        },
    },
};
</script>

<style scoped>
.chart-container {
    /* Frame 48095782 */

    box-sizing: border-box;

    position: absolute;
    width: 350px;
    height: 197px;
    left: calc(50% - 350px/2);
    top: 278px;

    background: radial-gradient(69.9% 110.16% at 17.58% 4.3%, rgba(251, 132, 23, 0.35) 0%, rgba(31, 17, 4, 0.1) 78.06%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
    border-radius: 20px;
    //border: 1px solid rgba(251, 132, 23, 0.05); /* 将边框透明度设置为 10% */

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.chart-wrapper {
    margin-left: 5%;
    width: 90%;
    height: 130px; /* 设置 canvas 高度为130px */
}

canvas {
    width: 100% !important; /* 设置 canvas 宽度为容器的100% */
    height: 100% !important; /* 确保 canvas 高度和容器一致 */
}

.info-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    justify-content: center; /* 向下对齐 */
    color: rgba(251, 132, 23, 0.3); /* 将边框透明度设置为 10% */;
}

.ratio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px; /* 调整字体大小 */
    color: #ccc; /* 设置文字颜色 */
}

.ratio-value {
    font-size: 18px; /* 设置比率数值的字体大小 */
    margin-top: -5px;
    font-weight: bold;
}

.price-text {
    font-size: 15px; /* 调整字体大小 */
    margin: 0 0 0 10px;
}

.colon {
    margin: 0 56px;
    font-size: 18px; /* 调整冒号的大小 */
    font-weight: bold;
}

.line {
    width: 90%; /* 线条宽度相对于容器 */
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 5px 0;
}

.price {
    height: 20px;
    line-height: 20px;
    font-size: 10px; /* 调整字体大小 */
    color: rgba(255, 255, 255, 0.8); /* 设置价格的颜色 */
}

.price-value {
    color: #FB8417; /* 设置价格数值的颜色 */
    font-size: 15.5px;
    margin-bottom: -5px;
    margin-left: 40px;
}
</style>
